<template>
	<view>
		<!--查询只能指定一个字段,请自行指定，生成时并未生成，以xxx代替-->
		<u-search placeholder="请输入关键词(订单号)" :show-action="false" v-model="searchForm.orderNo" @change="inputWord" margin="20rpx 50rpx"></u-search>
		<u-swipe-action>
			<view v-for="(row, index) in dataList" :key="index">
				<u-swipe-action-item @click="del(row.id)" :key="row.id" :threshold="60" duration="500"
					:options="options">
					<u-cell-group>
						<u-cell @click="edit(row.id)">
							<view slot="title" class="content">
								<view class="text-bold text-grey">
									<view class="ellipsis-description">
										姓 名：{{row.name}}
									</view>
								</view>
								<view class="text-bold text-grey">
									<view class="ellipsis-description">
										单号：{{row.phone}}
									</view>
								</view>
								<view class="text-bold text-grey">
									<view class="ellipsis-description">
										订单号：{{row.orderNo}}
									</view>
								</view>
								<view class="text-bold text-grey">
									<view class="ellipsis-description">
										款号：{{row.styleNo}}
									</view>
								</view>
								<view class="text-bold text-grey">
									<view class="ellipsis-description">
										信息集：
										<view v-for="(img,imgIndex) in row.picUrl.split(',')" :key="imgIndex"
											class="cu-avatar lg margin-left-sm"
											:style="{backgroundImage:'url('+ `https://${BASE_URL.apiUrl}/api` + img.trim() + ')'}">
										</view>
									</view>
								</view>
							</view>
						</u-cell>
					</u-cell-group>
				</u-swipe-action-item>
			</view>
		</u-swipe-action>
		<uni-fab horizontal="right" vertical="bottom" @fabClick="add"></uni-fab>
		<u-loadmore :status="status" @loadmore="loadmore" :line="true" />
		<u-gap height="20" bgColor="#fff"></u-gap>
	</view>
</template>

<script>
	import * as $auth from "@/common/auth"
	import testMobileService from '@/api/test/mobile/testMobileService'
	import customerMobileService from '@/api/test/customer/testCustomerLeaveService'

	export default {
		data() {
			return {
				status: 'loadmore',
				searchForm: {
					orderNo: ''
				},
				dataList: [],
				tablePage: {
					pages: 0,
					currentPage: 0,
					pageSize: 10,
					orders: [{
						column: "create_time",
						asc: false
					}]
				},
				loading: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			// 新增
			add() {
				uni.navigateTo({
					url: '/pages/subA/test/customer/CustomerMobileForm'
				})
			},
			// 修改
			edit(id) {
				uni.navigateTo({
					url: '/pages/subA/test/customer/CustomerMobileForm?id=' + id
				})
			},
			// 删除
			del(id) {
				uni.showModal({
					title: '提示',
					content: '您确认要删除数据吗',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							customerMobileService.delete(id).then((data) => {
								uni.showToast({
									title: data,
									icon: "success"
								})
								this.doSearch()
							})
						}
					}
				});
			},
			// 输入监听
			inputWord(e) {
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.doSearch()
				}, 300)
			},
			// 搜索
			doSearch() {
				this.dataList = [];
				this.tablePage.currentPage = 0;
				this.tablePage.pageSize = 10;
				this.tablePage.pages = 0;
				this.loadmore()
			},
			onReachBottom() {
				this.loadmore()
			},
			/*获取数据列表 */
			loadmore() {
				if (this.tablePage.currentPage !== 0 && this.tablePage.pages <= this.tablePage.currentPage) {
					this.status = 'nomore';
					return;
				}
				this.tablePage.currentPage = ++this.tablePage.currentPage;
				//联网加载数据
				this.status = 'loading';
				customerMobileService.list({
					'current': this.tablePage.currentPage,
					'size': this.tablePage.pageSize,
					'orders': this.tablePage.orders,
					...this.searchForm
				}).then((data) => {
					//追加新数据
					this.dataList = this.dataList.concat(data.records);
					this.tablePage.pages = data.pages;
					if (this.tablePage.pages <= this.tablePage.currentPage) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				})

			}
		}
	}
</script>